<template>
    <div>
      <ul>
        <li v-for="(val,key) in obj" :key="val.id">
           <span>{{key}}</span>:
           <span>{{val}}</span>
        </li>
      </ul>
    </div>
</template>

<script>
    var list = [
      {id:0,title:"message00",dateTime:"2020.12.05",content:"丁真最帅"},
      {id:1,title:"message01",dateTime:"2020.12.06",content:"达姆最帅"},
      {id:2,title:"message02",dateTime:"2020.12.07",content:"xxxxxxxx"},
      {id:3,title:"message03",dateTime:"2020.12.08",content:"日本沉了"},
      {id:4,title:"message04",dateTime:"2020.12.09",content:"湾湾回家了"}
    ]

    export default {
        name: "MessageDetail",
        props:["id"],
        data(){
          return {
            obj:{}
          }
        },
        watch:{
          $route:{
            deep:true,
            immediate:true,
            handler({params:{id}}){
              //根据id去数据库中找id对应的完整数据
              setTimeout(()=>{
                this.obj = list.filter((item)=>item.id === +id)[0]
              },1000)
            }
          }
        }
    }
</script>

<style scoped>

</style>
